// 图表示例
export const examples = [
  {
      label: "折线图",
      value: `({https}) => {
  return Promise.resolve({
xAxis: {
  type: 'category',
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
  type: 'value'
},
series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line'
  }
]
})            
}`,
  },
  {
      label: "饼图",
      value: `({https}) => {
  return Promise.resolve({
title: {
  text: 'Referer of a Website',
  subtext: 'Fake Data',
  left: 'center'
},
tooltip: {
  trigger: 'item'
},
legend: {
  orient: 'vertical',
  left: 'left'
},
series: [
  {
    name: 'Access From',
    type: 'pie',
    radius: '50%',
    data: [
      { value: 1048, name: 'Search Engine' },
      { value: 735, name: 'Direct' },
      { value: 580, name: 'Email' },
      { value: 484, name: 'Union Ads' },
      { value: 300, name: 'Video Ads' }
    ],
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }
]
})            
}`,
  },
  {
      label: "面积图",
      value: `({https}) => {
  return Promise.resolve({
title: {
  text: 'Stacked Area Chart'
},
tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'cross',
    label: {
      backgroundColor: '#6a7985'
    }
  }
},
legend: {
  data: ['Email', 'Union Ads']
},
toolbox: {
  feature: {
    saveAsImage: {}
  }
},
grid: {
  left: '3%',
  right: '4%',
  bottom: '3%',
  containLabel: true
},
xAxis: [
  {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }
],
yAxis: [
  {
    type: 'value'
  }
],
series: [
  {
    name: 'Email',
    type: 'line',
    stack: 'Total',
    areaStyle: {},
    emphasis: {
      focus: 'series'
    },
    data: [120, 132, 101, 134, 90, 230, 210]
  },
  {
    name: 'Union Ads',
    type: 'line',
    stack: 'Total',
    areaStyle: {},
    emphasis: {
      focus: 'series'
    },
    data: [220, 182, 191, 234, 290, 330, 310]
  },
]
})            
}`,
  },
  {
      label: "平滑折线图",
      value: `({https}) => {
return Promise.resolve({
xAxis: {
  type: 'category',
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
  type: 'value'
},
series: [
  {
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    smooth: true
  }
]
})        
}`,
  },
  {
      label: "柱状图",
      value: `({https}) => {
return Promise.resolve( {
xAxis: {
  type: 'category',
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
  type: 'value'
},
series: [
  {
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar'
  }
]
})        
}`,
  },
  {
      label: "环形图",
      value: `({https}) => {
return Promise.resolve({
tooltip: {
  trigger: 'item'
},
legend: {
  top: '5%',
  left: 'center'
},
series: [
  {
    name: 'Access From',
    type: 'pie',
    radius: ['40%', '70%'],
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 10,
      borderColor: '#fff',
      borderWidth: 2
    },
    label: {
      show: false,
      position: 'center'
    },
    emphasis: {
      label: {
        show: true,
        fontSize: 40,
        fontWeight: 'bold'
      }
    },
    labelLine: {
      show: false
    },
    data: [
      { value: 1048, name: 'Search Engine' },
      { value: 735, name: 'Direct' },
      { value: 580, name: 'Email' },
      { value: 484, name: 'Union Ads' },
      { value: 300, name: 'Video Ads' }
    ]
  }
]
})        
}`,
  },
  {
      label: "仪表盘",
      value: `({https}) => {
return Promise.resolve({
series: [
  {
    type: 'gauge',
    axisLine: {
      lineStyle: {
        width: 20,
        color: [
          [0.3, '#67e0e3'],
          [0.7, '#37a2da'],
          [1, '#fd666d']
        ]
      }
    },
    pointer: {
      itemStyle: {
        color: 'auto'
      }
    },
    axisTick: {
      distance: -30,
      length: 8,
      lineStyle: {
        color: '#fff',
        width: 2
      }
    },
    splitLine: {
      distance: -30,
      length: 30,
      lineStyle: {
        color: '#fff',
        width: 4
      }
    },
    axisLabel: {
      color: 'inherit',
      distance: 40,
      fontSize: 20
    },
    detail: {
      valueAnimation: true,
      formatter: '{value} km/h',
      color: 'inherit'
    },
    data: [
      {
        value: 70
      }
    ]
  }
]
})        
}`,
  },
];

export const renderExamples = [
  {
    label: '示例',
    value: `(h, {https}) => {
  // h为vue3的渲染函数，具体请参考vue3文档；https为远程方法调用，如：https.post('/test', {id: 1}).then(...)
  // 返回数据可以是直接数据也可以是异步的Promise对象；
  // 支持html标准标签，及Element以下组件：el-tag/el-button/el-input/el-link/el-avatar
  return h('div', {}, [
    h('el-tag', {type: 'primary'}, '标签')
  ])
}`
  }
]